<template>
  <div class="appointment">
    <div class="title">
      <img src="@/assets/lijiyuyue1.png" alt="">
      <span>天赋系统儿童脑力拓展训练中心</span>
    </div>
    <div class="input-div">
      <input type="text" placeholder="请输入您的姓名">
    </div>
    <div class="input-div">
      <input type="text" placeholder="请输入您的手机号">
    </div>
    <div class="input-div">
      <popup-picker :data="list1" value-text-align="left" v-model="date1" placeholder="请选择未来一周内的日期"></popup-picker>
      <img src="@/assets/jiantou.png" class="jiantou" alt="">
    </div>
    <div class="input-div">
      <popup-picker :data="list2" value-text-align="left" v-model="date2" placeholder="请选择当天的预约时间"></popup-picker>
      <img src="@/assets/jiantou.png" class="jiantou" alt="">
    </div>
    <div class="btn" @click="router({path: './appointComplete'})">提交</div>
  </div>
</template>

<script>
import { getAfterWeek } from '@/util/date.js'
import { PopupPicker } from 'vux'
export default {
  components: {
    PopupPicker,
  },
  data () {
    return {
      list1: [],
      date1: [],
      list2: [['10:00', '10:30','11:00', '11:30','12:00', '12:30','13:00', '13:30','14:00', '14:30', '14:30','15:00', '15:30', '16:00']],
      date2: [],
    }
  },
  created () {
    this.list1.push(getAfterWeek())
  },
  methods: {    
    router (path) {
      this.$router.push(path)
    }
  }
}
</script>
<style lang="stylus">
.appointment
  .title
    line-height 5rem
    height 5rem
    background-color #f5f7fa
    padding-left 1.5rem
    font-size 1.5rem
    font-weight 500
    color #999
    img
      width 1.6rem
      display inline-block
      position relative
      top .2rem
      margin-right .3rem
  .input-div
    height 6rem
    line-height 6rem
    margin 0 1.5rem
    border-bottom 1px solid #e5e5e5
    font-size 1.5rem
    position relative
    img
      position absolute
      width .6rem
      top 2.5rem
      right 0
    input
      color #333
      font-size 1.5rem
      line-height 6rem
      height 6rem
      background-color #fff
      width 100%
      outline none
      &::-webkit-input-placeholder
        color #999
  .btn
    background-color #43A047
    color #fff
    line-height 5rem
    height 5rem
    text-align center
    font-size 1.8rem
    font-weight bold
    display block
    margin 0 1rem
    position fixed
    bottom 1rem
    width calc(100% - 2rem)
    border-radius .4rem
</style>